<template>
	<view class="content">
		<view class="dayWeekMain">
			<view class="dayWeekBox" :class="[ item.state ? 'selBg2' : 'selBg1' ]" v-for="(item,index) in dayWeekList"
				:key="index" @click="selDayWeek(index,item)">
				<text class="textSize font22" :class="!item.type ? 'hui' : '' ">{{ item.week }}</text>
				<text class="textSize font26" :class="!item.type ? 'hui' : '' ">{{ item.monDate }}</text>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="showPopup = true">
				<view class="info" :class="item.type?'hui':''">
					<view class="status font34 fontw">
						{{item.type?'服务中':`${item.time}`}}
					</view>
					<view class="time font22">
						上钟人数：{{item.num}}
					</view>
				</view>
			</view>
		</view>
		<clh-popup :position="position" v-model="showPopup" :canSlide="false" :closeBtn="true" round="12">
			<view class="popup">
				<view class="title font24 fontw">
					详情
				</view>
				<view class="info">
					<view class="left">
						<view class="icon">


							<image src="../../../static/images/shareholder/team.png" mode="aspectFit"></image>


							<image src="../../../static/images/shareholder/team.png" mode="aspectFit"></image>

							<image src="/shareholder/static/images/team.png" mode="aspectFit"></image>



							<image src="/shareholder/static/images/team.png" mode="aspectFit"></image>

						</view>
						<view class="text font18">
							服务人员：小乔，貂蝉
						</view>
					</view>
					<view class="left">
						<view class="icon">


							<image src="../../../static/images/shareholder/tt.png" mode="aspectFit"></image>


							<image src="../../../static/images/shareholder/tt.png" mode="aspectFit"></image>

							<image src="/shareholder/static/images/tt.png" mode="aspectFit"></image>



							<image src="/shareholder/static/images/tt.png" mode="aspectFit"></image>

						</view>
						<view class="text font18">
							服务倒计时：18:23
						</view>
					</view>
					<view class="left">
						<view class="icon">


							<image src="../../../static/images/shareholder/tts.png" mode="aspectFit"></image>


							<image src="../../../static/images/shareholder/tts.png" mode="aspectFit"></image>

							<image src="/shareholder/static/images/tts.png" mode="aspectFit"></image>



							<image src="/shareholder/static/images/tts.png" mode="aspectFit"></image>

						</view>
						<view class="text font18">
							预约情况：2024.09.01 18:00 2024.09.01 23:00
						</view>
					</view>
				</view>
				<view class="btn font24">
					清场
				</view>
			</view>
		</clh-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				position: 'center',
				showPopup: false,
				days: '1,2,3,4,5,6,7',
				dayWeekList: [],
				list: [{
					num: '2',
					type: 0,
					time: '09:12',
				}, {
					num: '2',
					type: 0,
					time: '09:12',
				}, {
					num: '2',
					type: 0,
					time: '09:12',
				}, {
					num: '2',
					type: 0,
					time: '09:12',
				}, {
					num: '2',
					type: 0,
					time: '09:12',
				}, {
					num: '2',
					type: 1,
					time: '09:12',
				}, {
					num: '2',
					type: 0,
					time: '09:12',
				}, {
					num: '2',
					type: 1,
					time: '09:12',
				}, {
					num: '2',
					type: 0,
					time: '09:12',
				}, {
					num: '2',
					type: 0,
					time: '09:12',
				}]
			};
		},
		onLoad() {
			this.dayWeekArray()
			this.getCurrentTime()
		},
		methods: {
			dayWeekArray() {
				const selectedDays = this.days.split(",").map(Number);
				const now = new Date();
				const today = now.getDay(); //0-6，0代表周日
				const daysToAdd = selectedDays.map((day) => (day >= today ? day - today : 7 - (today - day))).sort((a, b) => a -
					b);
				for (const daysToAdd of daysToAdd) {
					const newDate = new Date(now);
					newDate.setDate(newDate.getDate() + daysToAdd);
					const year = newDate.getFullYear();
					const month = String(newDate.getMonth() + 1).padStart(2, "0");
					const date = String(newDate.getDate()).padStart(2, "0");
					let week = "";
					switch (newDate.getDay()) {
						case 0:
							week = "Sun";
							break;
						case 1:
							week = "Mon";
							break;
						case 2:
							week = "Tue";
							break;
						case 3:
							week = "Wed";
							break;
						case 4:
							week = "Thu";
							break;
						case 5:
							week = "Fri";
							break;
						case 6:
							week = "Sat";
							break;
					}
					this.dayWeekList.push({
						year: year,
						month: month,
						monDate: date,
						week: week,
						state: false,
						type: true
					});
				}
			},

			//选择时间
			selDayWeek(index, item) {
				if (!this.dayWeekList[index].type) {
					return
				}
				if (this.dayWeekList[index].state) {
					this.dayWeekList[index].state = false;
					console.log('未选中')
				} else {
					for (let i in this.dayWeekList) {
						this.dayWeekList[i].state = false;
					};
					this.dayWeekList[index].state = true;
					console.log('已选中：' + item.year + '/' + item.monDate + '/' + item.week)
				}
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				this.dayWeekList.map(item => {
					if (item.year < year) {
						item.type = false
					} else {
						if (item.month < month) {
							item.type = false
						}
					}
					if (item.monDate == day) {
						item.state = true
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.dayWeekMain {
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 31rpx 26rpx 52rpx 23rpx;
			background-color: #fff;

			.dayWeekBox {
				width: 82rpx;
				height: 99rpx;
				border-radius: 21rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.textSize {}

				.hui {
					color: #33333350;
				}
			}

			.selBg1 {
				background: #fff;
				color: #000;
			}

			.selBg2 {
				background: #1EB481;
				color: #fff;
			}
		}

		.list {
			padding: 0 28rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-gap: 10rpx;

			.item {
				width: 167rpx;
				height: 181rpx;
				background: #FFF;
				border-radius: 10rpx;
				border: 1px solid #2AB883;

				.info {
					height: 181rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.status {
						margin-bottom: 18rpx;
					}

					.time {}
				}

				.hui {
					background: #cccccc;

					.status {
						color: #1db481;
					}
				}
			}
		}

		/deep/.c-model {
			.c-model-content {
				width: 85% !important;

				.popup {
					padding: 25rpx 45rpx 27rpx 46rpx;

					.title {
						text-align: center;
						margin-bottom: 37rpx;
					}

					.info {
						color: #333333;
						line-height: 42rpx;
						padding: 18rpx 26rpx;
						margin-bottom: 19rpx;

						.left {
							.icon {
								width: 29rpx;
								height: 29rpx;
								display: flex;
								align-items: center;
								margin-right: 10rpx;

								image {
									width: 29rpx;
									height: 29rpx;
								}
							}

							.text {}
						}
					}

					.btn {
						height: 63rpx;
						background: linear-gradient(0deg, #2AB883 0%, #89D894 100%);
						border-radius: 21rpx;
						color: #FFFFFF;
						line-height: 63rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>